<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="gly"%>
<html>
<head>
<meta charset="GB18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/main.css">
<script src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
</head>
<body style="margin-top: -50px">
	<ol class="breadcrumb">
		<li class="active">车辆费用对比 <select style="margin-left: 900px;"
			id="se1">
		</select>
		</li>
	</ol>
	<div class="container-fluid">
		<div class="row">
			<div id="main" style="width: 1100px; height: 400px;"></div>
		</div>
	</div>

<!-- 显示费用分布模态框开始 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="main2" style="width:570px; height: 400px;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<!-- 显示费用分布模态框结束 -->

	<script
		src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/script/docs.min.js"></script>

	<script type="text/javascript">
		$(function() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var myChart2 = echarts.init(document.getElementById('main2'));

			$.getJSON("${pageContext.request.contextPath}/carCost/getAll",
					function(data) {
						var carList = data.carList;
						var str = "<option>车辆费用详情</option>";
						for (var i = 0; i < carList.length; i++) {
							str = str + "<option>" + carList[i] + "</option>";
						}
						$("#se1").html(str);
						// 指定图表的配置项和数据
						var option = {
							color : [ '#87cefa' ],
							title : {
								text : '车辆费用对比'
							},
							tooltip : {},
							legend : {
								data : [ '总花费' ]
							},
							xAxis : {
								data : data.carList
							},
							yAxis : {},
							series : [ {
								name : '总花费',
								type : 'bar',
								data : data.costList
							} ]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					})
					$("#se1").change(function(){
						var carlicense=$("#se1 option:selected").text();
						if (carlicense=='车辆费用详情') {
							return;
						}
						$("#myModalLabel").html(carlicense+"费用详情");
						$.getJSON("${pageContext.request.contextPath}/carCost/getDetail",{"carlicense":carlicense},function(data){
							myChart2.setOption({
					            series : [
					                {
					                    name: '访问来源',
					                    type: 'pie',    // 设置图表类型为饼图
					                    radius: '85%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
					                    data:data
					                }
					            ]
					        })
					        $('#myModal').modal('show');
						})
						
					})
		})
	</script>
</body>
</html>